
<!DOCTYPE html>
<html>


<HEAD>
    <meta charset="utf-8"/>
    <title>日历</title>

    <style>
        body {
          color: #000000;
          background-color: #ffffff;
        }

        .page {
          position: fixed;
          width: 100%;
          height: 100%;
        }

        .time_container,
        .date_container {
          width: 100%;
          margin: auto;
          text-align: center;
        }

        .time_container {
          top: 0;
          height: 55%;
        }

        .date_container {

        }

        .time {
          padding-top: 20px;
          font-size: 8rem;
        }

        .date {
          padding-top: 20px;
          font-size: 4rem;
        }

        .week {
          padding-top: 20px;
          font-size: 6rem;
        }
    </style>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
        //存放每个月天数的数组
        function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) {
            this[0] = m0;
            this[1] = m1;
            this[2] = m2;
            this[3] = m3;
            this[4] = m4;
            this[5] = m5;
            this[6] = m6;
            this[7] = m7;
            this[8] = m8;
            this[9] = m9;
            this[10] = m10;
            this[11] = m11;
        }
        //实现月历
        function calendar() {
            var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
            var today = new Date();
            var thisDay;
            var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
            year = today.getYear() + 1900;
            thisDay = today.getDate();
            if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
            nDays = monthDays[today.getMonth()];
            firstDay = today;
            firstDay.setDate(1);
            testMe = firstDay.getDate();
            if (testMe == 2) firstDay.setDate(0);
            startDay = firstDay.getDay();
            document.write("<TABLE BORDER='0' CELLSPACING='2' CELLPADDING='3' ALIGN='CENTER' BGCOLOR='#0080FF'>")
            document.write("<TR><TD><table border='0' cellspacing='2' cellpadding='3' bgcolor='Silver'>");
            document.write("<TR><th colspan='7'  bgcolor='#C8E3FF'><FONT STYLE='font-size:16pt;Color:Black'>苟日新，日日新，又日新</FONT>");
            var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var monthNames = new Array("1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月");
            var now = new Date();
            
            document.writeln("</TH></TR><TR><TH BGCOLOR='#0080FF'><FONT STYLE='font-size:16pt;Color:White'>日</FONT></TH>");
            document.writeln("<th bgcolor='White'><FONT STYLE='font-size:16pt;Color:#0080FF'>一</FONT></TH>");
            document.writeln("<TH BGCOLOR='White'><FONT STYLE='font-size:16pt;Color:#0080FF'>二</FONT></TH>");
            document.writeln("<TH BGCOLOR='White'><FONT STYLE='font-size:16pt;Color:#0080FF'>三</FONT></TH>");
            document.writeln("<TH BGCOLOR='White'><FONT STYLE='font-size:16pt;Color:#0080FF'>四</FONT></TH>");
            document.writeln("<TH BGCOLOR='White'><FONT STYLE='font-size:16pt;Color:#0080FF'>五</FONT></TH>");
            document.writeln("<TH BGCOLOR='#0080FF'><FONT STYLE='font-size:16pt;Color:White'>六</FONT></TH>");
            document.writeln("</TR><TR>");
            column = 0;
            for (i = 0; i < startDay; i++) {
                document.writeln("\n<TD><FONT STYLE='font-size:16pt'> </FONT></TD>");
                column++;
            }
            for (i = 1; i <= nDays; i++) {
                if (i == thisDay) {
                    document.writeln("</TD><TD ALIGN='CENTER' BGCOLOR='#FF8040'><FONT STYLE='font-size:16pt;Color:#ffffff'><B>")
                }
                else {
                    document.writeln("</TD><TD BGCOLOR='#FFFFFF' ALIGN='CENTER'><FONT STYLE='font-size:16pt;font-family:Arial;font-weight:bold;Color:#330066'>");
                }
                document.writeln(i);
                if (i == thisDay) document.writeln("</FONT></TD>")
                column++;
                if (column == 7) {
                    document.writeln("<TR>");
                    column = 0;
                }
            }
            document.writeln("</TABLE></TD></TR></TABLE>");
        }
    </SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
        var timerID = null;
        var timerRunning = false;
        function stopclock() {
            if (timerRunning)
                clearTimeout(timerID);
            timerRunning = false;
        }
        //显示当前时间
        function showtime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds()
            var timeValue = (hours >= 12) ? " 下午 " : " 上午 "
            timeValue += " " + hours
            timeValue += ((minutes < 10) ? ":0" : ":") + minutes
            timeValue += ((seconds < 10) ? ":0" : ":") + seconds
            document.clock.face.value = timeValue;
            timerID = setTimeout("showtime()", 1000);//设置超时,使时间动态显示
            timerRunning = true;
        }

        function update() {
          var date = new Date()
          var utc8DiffMinutes = date.getTimezoneOffset() + 480
          date.setMinutes(date.getMinutes() + utc8DiffMinutes)
  
          var timeString = date.getHours() + ':' + ('0' + date.getMinutes()).slice(-2)
          var dateString = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
          var weekList = ['日', '一', '二', '三', '四', '五', '六']
          var weekString = '星期' + weekList[date.getDay()]
  
          document.getElementById("time").innerHTML = timeString
          document.getElementById("date").innerHTML = dateString
          document.getElementById("week").innerHTML = weekString
        }

        function startclock() {
            stopclock();
            showtime();
            update();
        }

        setInterval("update()", 60 * 1000)
    </SCRIPT>
</HEAD>

<BODY BACKGROUND="bg1.jpg" onload="update();" onLoad="startclock(); timerONE=window.setTimeout" TEXT="#000000" TOPMARGIN="0">
    <div class="page">
        
        <DIV ALIGN="center">
            <FONT STYLE='font-size:24pt;Color:Black'>当下不杂，专注于一</FONT>
            <div class="date_container">
                <div class="time" id="time"></div>
                <!-- <div class="week" id="week"></div> -->
                <div class="date" id="date"></div>
            </div>

            <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
                calendar();
            </SCRIPT>
        </DIV>

    </div>

</BODY>

</HTML>

